@import './base.less';
@import './normalize.less';
//引入两个出初始化文件

//本项目参考375px为尺寸
//适配选择vw  

@rootSize: 3.75vw;
//基于设计稿375px的vw适配


body {
    background-color: #ffffff;
    height: (1600 / @rootSize);

}


// head         -- s ---
header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: (46 / @rootSize);
    //   background-color: aqua;
    width: 100%;
    margin-top: (50 / @rootSize);

    h5 {
        font-weight: 400;
        line-height: (46 / @rootSize);
        padding-left: (15 / @rootSize);

    }

    .search {
        position: relative;
        flex: 1;
        height: (32 / @rootSize);
        padding: 0 (5 / @rootSize);
        // background-color: pink;
        text-align: center;

        i {
            position: absolute;
            top: (8 / @rootSize);
            left: (30 / @rootSize);
            color: #ccc;
        }

        input {
            //  margin-left: 10px;
            width: 95%;
            height: 100%;
            border: none;
            background-color: #f7f7f7;
            border-radius: (32 / @rootSize);

            padding-left: (50 / @rootSize);
            font-size: (12 / @rootSize);
        }
    }

    .msg {
        padding: 0 (10 / @rootSize);

    }

    img {
        width: (20 / @rootSize);



    }
}

// <!-- banner  ----s-->
.banner {
    width: (350 / @rootSize);
    height: (150 / @rootSize);
    // background-color: pink;
    margin: (15 / @rootSize);
    border-radius: (5 / @rootSize);

    .aticve {
        display: flex;
        justify-content: center;
        align-items: center;
        height: (20 / @rootSize);


    }

    i {
        display: block;
        margin-left: (4/ @rootSize);
        width: (8 / @rootSize);
        height: (2 / @rootSize);
        background-color: black;
        line-height: (20 / @rootSize);

        &:last-child {
            background-color: #ccc;
        }

    }

}



// <!-- ad广告 -->
.ad {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: (80 / @rootSize);


    div {
        width: (165 / @rootSize);
        height: (70 / @rootSize);
        box-shadow: (8 / @rootSize) 0 (20 / @rootSize) 0 rgba(0, 0, 0, 0.16);
    }
}

//   <!-- goods 商品页 -->
.goods {
    display: flex;
    justify-content: space-between;
    height: (18 / @rootSize);
    width: 100%;
    margin-top: (36 / @rootSize);
    padding: 0 (18 / @rootSize);

    h4 {
        font-size: (18 / @rootSize);
    }

    img {
        height: (15 / @rootSize);
    }
}

.goods_item {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: (200 / @rootSize);

    margin-top: (20 / @rootSize);

    div {

        width: (165 / @rootSize);
        height: 100%;

    }

    img {
        width: 100%;
    }

    .txt {
        height: (60 / @rootSize);

        h4 {
            margin: (7 / @rootSize) 0;

            &:nth-child(2) {
                font-weight: 400;
            }

            &:nth-child(3) {
                font-weight: 400;
                color: orange;
                font-size: (15 / @rootSize);
            }


        }
    }
}


// ad_itme --s-------->
.ad_item {

    height: (56 / @rootSize);
    width: (343 / @rootSize);
    margin: 0 auto;
    border-radius: 5%;

    img {
        width: 100%;

    }
}


//  list ----s---
.title {
    display: flex;
    justify-content: space-between;
    height: (50 / @rootSize);
    //  background-color: aqua;
    padding: 0 (12 / @rootSize);
    line-height: (50 / @rootSize);

    //   background-color: aqua;
    h3:nth-child(1) {
        font-size: (20 / @rootSize);
    }

    h3:nth-child(2) {
        padding-left: (130 / @rootSize);
        font-weight: 600;
    }

    h3:nth-child(4) {
        font-size: (20 / @rootSize);
        color: #ccc;
    }

    i {

        position: relative;
        top: (40 / @rootSize);
        right: (40 / @rootSize);
        height: (5 / @rootSize);
        width: (15 / @rootSize);
        background-color: blue;
        border-radius: 5px;
    }

}

.list {

    margin: (12 / @rootSize);
}

.list_1 {
    display: flex;
    width: (350 / @rootSize);
    height: 100%;
    padding: (10 / @rootSize) 0;
    // background-color: bisque;

    .pic {
        width: (110 / @rootSize);
        height: (80 / @rootSize);

        img {
            width: 100%;
        }
    }


    .info {
        width: (236 / @rootSize);
        height: (110 / @rootSize);
        // background-color: aqua;
        margin-left: 5px;

        h4 {
            padding: (3 / @rootSize) 0;
        }

        span {
            margin-top: (3 / @rootSize);
            color: #ccc;

            padding-left: 0 (10 / @rootSize);

            i {
                width: (42 / @rootSize);

                font-size: (12 / @rootSize);
                border-left: 1px solid #cfcfcf;
                border-right: 1px solid #cfcfcf;
                font-style: normal;
                padding: 0 (5 / @rootSize);
                font-size: (12 / @rootSize);
            }
        }

        h5 {
            padding: (3 / @rootSize) 0;
            display: inline-block;
            white-space: nowrap;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .feature {
            display: flex;

            span {
                width: (43 / @rootSize);
                height: (17 / @rootSize);
                border: 1px solid #cfcfcf;
                margin-left: (10 / @rootSize);
                text-align: center;
                line-height: (17 / @rootSize);
            }

        }

        .num {
            font-size: (18/ @rootSize);
            color: orange;
            font-weight: 500;
            padding: (5 / @rootSize);
        }
    }
}


.more {
    width: 100%;
    height: (40 / @rootSize);

    margin-top: (10 / @rootSize);

    span {
        display: block;
        width: (260 / @rootSize);
        height: (38 / @rootSize);
        background-color: #ccc;
        border-radius: (38 / @rootSize);
        text-align: center;
        margin-left: 40px;
        line-height: (38 / @rootSize);
        color: #999;
    }
}

// story ---s---
.story img {
    text-align: center;
    margin-top: (24 / @rootSize);
}

//  footer  ---s--
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: (50 / @rootSize);
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: (8 / @rootSize) 0 (15 / @rootSize) 0 rgba(0, 0, 0, 0.16);
    color: #999;
    

    div {

        width: 25%;
        text-align: center; //水平居中
        &:nth-child(1) span   {
            color: #000;
            
           }   

    
        .iconfont {
            font-size: (20 / @rootSize);  
          
        }
        p {
            font-size: (12 / @rootSize); 
        
        }
    }
}